<template>
  <div class="mycard">
    <h3>第{{index + 1}}题 ：{{item.question}}</h3>
    <ul>
        <li v-for="(answer, i) in item.answers" :key="answer.id">
            <input type="checkbox" class="checkbox" :class="'check' + index" @click="check(i, answer)"> {{answer.child}}
        </li>
    </ul>
    <button @click="certain" class="btn" :disabled="disabled">确定</button>
 </div>
</template>

<script>
import { ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
export default {
    props: {
        item: Object,
        index: Number,
        num: Number
    },
    setup(props, {emit}) {
        const disabled = ref(true)
        const instence = getCurrentInstance()

        let router = useRouter() // 获取页面路由方法
        // console.log(instence);
        let answer = false
        function check(i, item) {
            // console.log(i, item);
            let classN = '.check' + props.index
            let answers = document.querySelectorAll(classN)
            for(let j = 0 ;j<answers.length; j++) {
                answers[j].checked = false
            }
            answers[i].checked = true
            answer = item.status
            disabled.value = false
        }

        function certain() {
            
            let rightNum = localStorage.getItem('rightNum') * 1
            // console.log(rightNum);
            if(answer) {
                rightNum++  
            }
            if(props.index === 9) {
                 instence.appContext.config.globalProperties.$alert.show({
                    msg: '题目已经答完, 快去查看成绩吧',
                    btn: '查看成绩',
                    btnClick() {
                        instence.appContext.config.globalProperties.$alert.hide()
                        router.push('/about?num='+ rightNum )
                        localStorage.setItem('rightNum', rightNum)
                    }
                })
            } else {
                if(answer) {
                    instence.appContext.config.globalProperties.$alert.show({
                        msg: '回答正确，你真是一个厉害的佩奇！！！',
                        btn: '下一题',
                        btnClick() {
                            let count = props.num
                            count++;
                            emit('update:num', count)
                            instence.appContext.config.globalProperties.$alert.hide()
                            localStorage.setItem('rightNum', rightNum)
                        }
                    })
                    
                } else {
                    instence.appContext.config.globalProperties.$alert.show({
                        msg: '回答错误，你是个麻瓜吧！！！',
                        btn: '下一题',
                        btnClick() {
                            // console.log(1);
                            let count = props.num
                            count++;
                            emit('update:num', count)
                            instence.appContext.config.globalProperties.$alert.hide()
                        }
                    })
                }
            }
            
        }
        return {
            disabled,
            check,
            certain
        }
    }
 }
</script>

<style scoped lang="scss">
 ul {
    list-style: none;
    padding: 0;
    margin: 0;
 }
 h3 {
 font-size: 16px;
 font-weight: bold;}
 ul li {
 line-height: 40px;
 display: flex;
 align-items: center;
    input {
        width: 20px;
        height: 20px;
        margin-right: 15px;
    }
 }
 .btn {
 display: block;
 width: 80px;
 height: 35px;
 margin: 20px auto;
 border: none;
 outline: none;
 background-color: orange;
 color: #fff;
 border-radius: 6px;}
  .btn[disabled] {
  background-color: #ccc;
  color: #333;}
</style>